<template>
	<div>
		<a-card style="margin-top: 12px;">
			<div>
				<a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 7}"
					:wrapperCol="{span: 17, offset: 0}">
					<div class="fold">
						<a-row>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="用户名" prop="username">
									<a-input v-model="form.username" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="token" prop="token">
									<a-input v-model="form.token" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="操作类型" prop="type">
									<a-select allowClear v-model="form.type"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">
											{{item.title}}</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="操作时间" prop="operationTime">
									<a-range-picker :allowClear="false"
										:ranges="{ 今天: [moment(), moment()], '本月': [moment().startOf('month'), moment().endOf('month')] }"
										v-model="form.operationTime" :format="format" :valueFormat="format"
										style="width: 100%" :placeholder="['开始时间', '结束时间']" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row type="flex" justify="end">
							<a-button @click="submitForm" type="primary">查询</a-button>
							<a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
						</a-row>
					</div>
				</a-form-model>
			</div>
		</a-card>
		<a-card style="margin-top: 12px;">
			<div>
				<div>
					<a-button class="space-vertical" @click="exportAction" type="primary" v-auth="`log:logLogin:export`">导出</a-button>
				</div>
				<standard-table ref="table" :size="`middle`" :page="page" :pageSize="pageSize" :total="total"
					:loading="loading" :columns="columns" :dataSource="dataSource" @onPageChange="onPageChange">
					<div slot="type" slot-scope="{text}">
						<span>{{text | dictFilter(dict.type)}}</span>
					</div>
				</standard-table>
			</div>
		</a-card>
	</div>
</template>

<script>
	import StandardTable from '@/components/table/standard-table'
	import moment from 'moment'
	import {
		logLoginService
	} from '@/services'
	import {
		tableToExcel
	} from '@/utils/excel-util'

	const columns = [{
			title: '序号',
			dataIndex: 'no',
			width: 80,
			scopedSlots: {
				customRender: 'no'
			}
		},
		{
			title: '操作类型',
			dataIndex: 'type',
			width: 80,
			scopedSlots: {
				customRender: 'type'
			}
		},
		{
			title: '用户名',
			dataIndex: 'username',
			width: 140
		},
		{
			title: 'token',
			dataIndex: 'token',
			width: 200,
			ellipsis: true
		},
		{
			title: '用户IP',
			dataIndex: 'userIp',
			width: 140
		},
		{
			title: '目标系统IP',
			dataIndex: 'targetIp',
			width: 140,
			ellipsis: true
		},
		{
			title: '浏览器',
			dataIndex: 'browser',
			width: 160
		},
		{
			title: '操作系统',
			dataIndex: 'os',
			width: 180,
			ellipsis: true
		},
		{
			title: '操作时间',
			dataIndex: 'operationTime',
			width: 160
		},
	]
	export default {
		name: 'LogLogin',
		components: {
			StandardTable
		},
		data() {
			return {
				format: 'yyyy-MM-DD',
				loading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				columns: columns,
				dataSource: [],
				form: {
					username: undefined,
					token: undefined,
					type: undefined,
					operationTime: [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
						'yyyy-MM-DD')]
				},
				dict: {
					type: []
				}
			}
		},
		filters: {
			dictFilter: (val, dictList) => {
				const dict = dictList.find(item => item.value == val)
				return dict ? dict.title : '未知'
			}
		},
		authorize: {
			exportAction: 'log:logLogin:export'
		},
		methods: {
			moment,
			reloadTable() {
				this.page = 1
				this.queryListAction()
			},
			onPageChange(pagination) {
				this.page = pagination.current
				this.pageSize = pagination.pageSize
				this.queryListAction()
			},
			resetForm() {
				this.$refs.queryForm.resetFields()
				this.form.operationTime = [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
					'yyyy-MM-DD')]
				this.reloadTable()
			},
			submitForm() {
				this.reloadTable()
			},
			exportAction() {
				// this.$message.success('敬请期待!')
				logLoginService.exportExcel(null).then(res => {
					const result = res.data
					if (result.code === 200) {
						//获取各列宽度
						let columns = this.$refs.table.columns;
						let widths = []
						for(var i=0; i<columns.length; i++){
							widths.push({wpx: columns[i].width})
						}
						tableToExcel(document.querySelector('table'), widths, '登入日志')
					}
				}).finally(this.loading = false)
			},
			queryListAction() {
				this.loading = true
				const params = {
					page: this.page,
					pageSize: this.pageSize,
					queryParams: this.form
				}
				logLoginService.queryList(JSON.stringify(params)).then(res => {
					const result = res.data
					if (result.code === 200) {
						this.dataSource = []
						this.dataSource = result.data.records
						this.total = result.data.totalCount
					}
				}).finally(this.loading = false)
			}
		},
		created() {
			this.getDict(JSON.stringify({
				code: 'SYS_LOGIN_TYPE'
			})).then(res => this.dict.type = res.data.data)
			this.reloadTable()
		}
	}
</script>
<style scoped lang="less">
	.ant-form-item {
		margin-bottom: 12px;
	}

	.fold {
		width: calc(100% - 12px);
		display: inline-block;
	}

	@media screen and (max-width: 900px) {
		.fold {
			width: 100%;
		}
	}
</style>
